<template>
  <div class="demo">
    <h4>图标</h4>
    <AfastIcon name="close"></AfastIcon>
    <div class="icons">
      <div
        @click="copy(`<Icon name=“${icon}“/>`)"
        class="box"
        v-for="(icon, index) in icons"
        :key="index"
      >
        <Icon :name="icon" :size="40" class="icon" />
        <div @click.stop="copy(icon)" class="icon-name">{{ icon }}</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import AfastIcon from '@/components/a/AfastIcon.vue';
import Icon from '@/components/a/AfastIcon.vue'
// import useClipborad from 'vue-clipboard3'
const copy = (text: string) => {
  text = text.replace('“', '"').replace('“', '"')
  if (confirm(`将${text}写入剪切板？`)) {
    // useClipborad().toClipboard(text)
  }
}
const icons = (() => {
  const icons: never[] = []
  
  return icons
})()
</script>
<style lang="scss" scoped>
.icons {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  .box {
    position: relative;
    cursor: pointer;
    width: 90px;
    height: 90px;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 50px;
    padding-top: 20px;
    box-sizing: border-box;
    --icon-fill-color: #555;

    .icon-name {
      text-align: center;
      width: 80%;
      position: absolute;
      bottom: 5px;
      font-size: 13px;
      overflow: hidden;
    }

    .icon-name:hover {
      font-weight: bold;
    }
  }
  .box:hover {
    --icon-fill-color: var(--primary-color);
    color: var(--primary-color);
  }
}
</style>
